<template>
  <div class="main">
    <div class="topTitle">{{ props.title }}</div>
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <NSpace>
              <NForm ref="formRef" :model="formValue" :rules="rules" label-placement="left" :label-width="130"
                label-align="right">
                <NFormItem label="会议室名称:" path="meetingRoom">
                  <NInput v-model:value="formValue.meetingRoom" placeholder="输入名称" />
                </NFormItem>
                <NFormItem label="会议室类型:" path="meetingRoomTypeCode">
                  <NSelect :options="roomTypeList" v-model:value="formValue.meetingRoomTypeCode" placeholder="请选择会议室类型"
                    clearable style="width: 200px" @update-value="handleChangeType" />
                </NFormItem>
                <NFormItem label="会议室地址:" path="address">
                  <NInput v-model:value="formValue.address" placeholder="会议室地址" />
                </NFormItem>
                <NFormItem label="容纳人数:" path="meetingRoomNum">
                  <NInput v-model:value="formValue.meetingRoomNum" placeholder="输入容纳人数" />
                </NFormItem>
                <NFormItem label="备注" path="remarks">
                  <NInput v-model:value="formValue.remarks" placeholder="请输入备注" type="textarea" />
                </NFormItem>
              </NForm>
            </NSpace>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="center">
      <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
        <template #icon>
         <img :src="VBackImg" style="width: 25rem; height: 25rem"/>
        </template>
        返回
      </NButton>
      <NButton type="primary"  @click="confirm">
        保存
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSelect,
  NSpin,
  NImage,
  useMessage
} from 'naive-ui'
import type { FormInst } from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import type { typeModel } from '@/api/office'
import VBackImg from '@/assets/images/back.png'

const tags = useTagStore().tags
const message = useMessage()
const route = useRoute()

const props = defineProps({
  id: {
    type: [Number, String]
  },
  title: {
    type: String
  }
})

const formRef = ref<FormInst | null>(null)
const formValue = ref({
  address: '',
  meetingRoom: '',
  meetingRoomNum: '',
  meetingRoomType: '',
  meetingRoomTypeCode: '',
  remarks: ''
})
const rules = {
  meetingRoom: {
    required: true,
    message: '请输入会议室名称',
    trigger: 'blur'
  },
  meetingRoomTypeCode: {
    required: true,
    message: '请输入会议室类型',
    trigger: ['change', 'blur']
  },
  meetingRoomNum: {
    required: true,
    message: '请输入可容纳人数',
    trigger: 'blur'
  },
  address: {
    required: true,
    message: '请输入会议地址',
    trigger: 'blur'
  },
  remarks: {
    required: true,
    message: '请输入备注',
    trigger: 'blur'
  }
}

//会议室类型
const roomTypeList: any = ref([])
const getRoomType = async () => {
  const [error, res] = await sendRequest<HttpResponse<typeModel[]>>({
    module: 'office',
    api: 'roomType',
    override: {
      params: {
        dicCode: 'A13'
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  roomTypeList.value = []
  res.data.map((i: any) => {
    roomTypeList.value.push({
      label: i.dicName,
      value: i.dicCode
    })
  })
}
getRoomType()

const handleChangeType = (_: any, info: any) => {
  formValue.value.meetingRoomType = info?.label
}

//会议室信息
const spinShow = ref(false)
const getInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'office',
    api: 'roomItem',
    uri: {
      id: props.id as never
    }
  })
  if (error) return message.error(error.message)
  if (res.code != 0) return message.error(res.msg)
  const tmp: any = res.data
  if (tmp) {
    formValue.value.address = tmp.address
    formValue.value.meetingRoom = tmp.meetingRoom
    formValue.value.meetingRoomNum = tmp.meetingRoomNum
    formValue.value.meetingRoomType = tmp.meetingRoomType
    formValue.value.meetingRoomTypeCode = tmp.meetingRoomTypeCode
    formValue.value.remarks = tmp.remarks
  }
  spinShow.value = false
}

// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)

    tags.splice(index, 1)
if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}

// 确定
const confirm = () => {
  formRef.value?.validate(async (err: any) => {
    if (err) return
    if (props.id == 0) {
      const [error, res] = await sendRequest<HttpResponse>({
        module: 'office',
        api: 'roomSave',
        override: {
          data: {
            ...formValue.value
          }
        }
      })
      if (error) return message.error(error.message)
      message.success(res.msg)
      goBack()
    } else {
      const [error, res] = await sendRequest<HttpResponse>({
        module: 'office',
        api: 'roomUpdate',
        override: {
          data: {
            id: props.id,
            ...formValue.value
          }
        }
      })
      if (error) return message.error(error.message)
      message.success(res.msg)
      goBack()
    }
  })
}

// watch(
//   () => route,
//   () => {
//     if (route.path == '/edit_room' && props.id) getInfo()
//   },
//   { deep: true, immediate: true }
// )
watch(
  () => props.id,
  () => {
    if (props.id && props.title == "用车编辑") getInfo()
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    height: 64rem;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        width: 360rem;
        height: 130rem;
        background: #e1e1e1;
        margin-bottom: 25rem;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
